<template>
	<view class="container">
		<!-- 订单门店信息 -->
		<view class="orderShop">
			<view class="orderTips">
				支付成功，请您前往指定门店消费
			</view>
			<view class="shopMessage">
				<uni-icons type="shop" size="24" color="#FFFFFF"></uni-icons>
				<view class="shopIntro">
					<view class="shopName">
						伟业汽车美容店(人民路店)
					</view>
					<view class="shopAddress">
						山阳区人民中路32号
					</view>
				</view>
				<uni-icons type="paperplane-filled" size="24" color="#FFFFFF"></uni-icons>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="orderDetail">
			<text class="orderTitle">订单详情</text>
			<uni-card>
				<view class="orderService">
					<view class="clearCarDetail">
						<text class="clearCar">车辆精洗</text>
						<text class="clearPrice">￥ 199</text><br>
					</view>
					<text class="clearCarPrice">车辆附加费用</text>
					<text class="clearCarPriceDetail">￥ 199</text>
				</view>
			</uni-card>
			<uni-card>
				<view class="orderServicePrice">
					<view class="originalDetail">
						<text class="original">原价</text>
						<text class="originalPrice">￥100</text><br>
					</view>
					<text class="favorable">优惠</text>
					<text class="favorablePrice">-￥10</text><br>
					<view class="line"></view>
					<text class="coupon">优惠券</text>
					<text class="couponPrice">-￥20</text>
				</view>
			</uni-card>
			<uni-card>
				<view class="orderCountPrice">
					<text class="payPrice">支付金额</text>
					<text class="originalPriceDeatil">￥90</text>
				</view>
			</uni-card>
		</view>
		<!-- 订单信息 -->
		<view class="orderMessage">
			<text class="orderMessageTitle">订单信息</text>
			<uni-card>
				<view class="orderMessageDetail">
					<view class="orderNumberCount">
						<text class="orderNumber">订单号</text>
						<text class="orderNumberDetail">121212112487878</text><br>
					</view>
					<view class="orderDateMessage">
						<text class="orderDate">车辆精洗</text>
						<text class="orderDateTime">2020.01.08 17:40</text><br>
					</view>
					<text class="orderCar">车辆</text>
					<text class="orderCarData">奔驰FWE4/豫A98FHJ</text>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.container{
		background-color: #FFFFFF;
		min-height: 100vh;
	}
	/* 订单门店信息 */
	.orderShop{
		height: 250rpx;
		width: 750rpx;
		background-color: #0084FF;
	}
	.orderTips{
		font-size: 36rpx;
		color: #FBFBFB;
		padding: 36rpx 170rpx 36rpx 40rpx;
	}
	/* 店铺信息 */
	.shopMessage {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: 40rpx;
	}

	/* 店铺图标 */
	.uni-icons {
		margin-right: 20rpx;
	}

	/* 店铺介绍 */
	.shopIntro {
		display: flex;
		flex-direction: column;
	}

	/* 店铺名称 */
	.shopName {
		width: 414rpx;
		height: 40rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	/* 店铺地址 */
	.shopAddress {
		width: 139px;
		height: 17px;
		font-size: 14px;
		color: #FFFFFF;
	}
	.line{
		margin-top:40rpx;
		margin-bottom:40rpx;
		width: 580rpx;
		border:2rpx solid #ECECEC;
	}
	/* 订单信息 */
	.orderDetail{
		margin-top: 24rpx;
	}
	.orderTitle{
		margin-left: 40rpx;
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		color: #101010;
	}
	/* 车辆精洗 */
	.orderService{
		width: 696rpx;
		height: 184rpx;
	}
	.clearCarDetail{
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	.clearCar{
		width: 112rpx;
		height: 40rpx;
		font-size: 32rpx;
		margin-right: 360rpx;
		margin-bottom: 40rpx;
		font-weight: bold;
	}
	.clearPrice{
		font-size: 28rpx;
		width: 100rpx;
		height: 42rpx;
	}
	.clearCarPrice{
		width: 112rpx;
		height: 40rpx;
		font-size: 32rpx;
		margin-right: 300rpx;
		font-weight: bold;
	}
	.clearCarPriceDetail{
		font-size: 28rpx;
		width: 100rpx;
		height: 42rpx;
	}
	/* 订单价格 */
	.orderServicePrice{
		width: 696rpx;
		height: 290rpx;
	}
	.originalDetail{
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	.original{
		width: 112rpx;
		height: 40rpx;
		font-size: 32rpx;
		margin-right: 440rpx;
	}
	.favorable{
		width: 112rpx;
		height: 40rpx;
		font-size: 32rpx;
		margin-right: 440rpx
		
	}
	.favorablePrice{
		color: #FF2525;
		font-size: 28rpx;
	}
	.coupon{
		width: 112rpx;
		height: 40rpx;
		font-size: 32rpx;
		margin-right: 412rpx
	}
	/* 支付金额 */
	.orderCountPrice{
		width: 696rpx;
		height: 68rpx;
		margin-top: 32rpx;
	}
	.payPrice{
		font-size: 32rpx;
		margin-right: 380rpx;
	}
	.originalPriceDeatil{
		font-size: 36rpx;
		color: #3DBD78;
	}
	/* 订单信息 */
	.orderMessage{
		padding-bottom: 80rpx;
	}
	.orderMessageTitle{
		font-size: 36rpx;
		margin-left: 40rpx;
	}
	.orderMessageDetail{
		height: 240rpx;
	}
	.orderNumberCount{
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	.orderNumber{
		font-size: 32rpx;
		margin-right: 276rpx;
	}
	.orderDateMessage{
		margin-bottom: 40rpx;
	}
	.orderDate{
		font-size: 32rpx;
		margin-right: 252rpx;
	}
	.orderCar{
		font-size: 32rpx;
		margin-right: 268rpx;
	}
</style>